<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>函数式组件使用props</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
		<!-- 引入prop-types用于对props进行限制 -->
		<script type="text/javascript" src="../js/prop-types.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">

			function Person(props){
				const {name,sex,age,address} = props
				return (
					<ul>
						<li>姓名：{name}</li>	
						<li>性别：{sex}</li>	
						<li>年龄：{age}</li>	
						<li>住址：{address}</li>	
					</ul>
				)
			}

			//限制props的类型以及必要性
			Person.propTypes = {
				name:PropTypes.string.isRequired, //name必须传且为字符串
				age:PropTypes.number.isRequired,//age必须传且为数值
				sex:PropTypes.string.isRequired,//sex必须传且为字符串
				address:PropTypes.string //address可传可不传，但是传必须是字符串
			}

			//给props指定默认值，注意：可传可不传的属性，才需要配置默认值
			Person.defaultProps = {
				address:'火星'
			}
			
			let p1 = {
				name:'老刘',
				age:18,
				sex:'女',
				address:'我心里'
			}
			ReactDOM.render(<Person {...p1}/>,document.getElementById('test'))

		</script>
	</body>
</html>